<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no">
    <meta content="yes" name="apple-touch-fullscreen"/>
    <title>装备详情</title>
    <link rel="stylesheet" href="/static/css/main.css"/>
    <link rel="stylesheet" href="/static/css/show/gearmore.css"/>
    <link rel="stylesheet" href="/static/toastr/toastr.min.css"/>
</head>
<body>

<!--contianer-->
<section class="det-container">
    <!--focus-->
    <section class="det-focus">
        <div id="focus" class="focus">
            <div class="hd">
                <ul></ul>
            </div>
            <div class="bd">
                <ul>
                {loop $gear['images'] $k $v}
                    <li><a href="javascript:;"><img {if $k==0}id='first-img'{/if}src="{$v} " /></a></li>                   
                {/loop}    
                </ul>
            </div>
        </div>
    </section>
    <!--shoe info-->
    <section class="det-c det-info">
        <h2>{$gear['name']}</h2>
        <h3>综合评分：</h3>
             
        <p class="det-tit">综合得分：<span class="r_star j_star_one" data-score='{$gear["score"]}'><em></em></span> <span>官方售价： {eval echo $gear['currency']?'$':'￥'}{$gear['price']}</span></p>
        {if $blendent}
        <div class="det-shoe-color">
            <b>配色：</b>
            <div class="det-shoe-map" id='blendent'>
           <!--  <img src="http://pic1.nipic.com/2008-09-08/200898163242920_2.jpg"> -->
           {loop $blendent $k $v} 
             <img {if $k==0}class="cur"{/if} src="{$v['img']}"/> 
             {/loop} 
            </div>
        </div>
        {/if}
        <p class="det-require">
            <span id='iwant' data-id="{$gear['gearId']}">想要 <i>(<em>{$gear['likes']}</em>)</i></span>
            <span id='possess'  data-id="{$gear['gearId']}">拥有 <i>(<em>{$gear['possess']}</em>)</i></span>
            {if $gear['shopUrl']}<a href="$gear['shopUrl']">淘一淘</a>{/if} <a id="join_compare" href="javascript:;" style="margin-right:10px;" data-id="{$gear['gearId']}">加入对比</a>
        </p>
    </section>
    <!--args and intro-->
    <section class="det-intro">
        <div class="det-intro-up mt10">
            <span><i class="ic-list"></i>参数详情</span>
            <a href="/show/gearPp?gearId={$gear['gearId']}">性能图&nbsp;尺码感受<i class="ic-arrow-right"></i></a>
        </div>
        <div class="det-intro-down mt10">
           <span><i class="ic-list"></i>产品简述</span>
            <p class="dt-icont" id="dt-icont">{$gear['shortDesc']}</p>
            <p class="dt-slide">
                <i class="dt-select"></i>
            </p>
        </div>
    </section>
    <!--evaluate info-->
    {if $news}
        <section class="det-evaluate mt10" >
            <p class="det-intro-up">
                <span><i class="ic-list"></i>评测信息</span>
                <a href="/show/moreNews?gearId={$gear['gearId']}" >更多 <i class="ic-arrow-right"></i></a>
            </p>
            
            <div class="det-intro-cont">
                <p>{$news['title']}</p>
                {loop $news['img'] $k1 $v1}
                <img src="{$v1}" alt=""/>                
                {/loop}
            </div>
         

        </section>
    {/if}
    <!--comments-->
    <section class="det-comment det-evaluate mt10" id="j_comment">
    {if $comment}
        <p class="det-intro-up">
            <span><i class="ic-com"></i>宝贝评论</span>
        </p>
        
        <div class="det-comm-cont">
            <header class="det-comm-tit">
                <img src="{$comment['header']}"/>
                <h4>{$comment['nickname']}</h4>
                <span><i class="ic-clock"></i>{$comment['dateformat']}</span>
            </header>
            {if $comment['thumbImg']}
            <link rel="stylesheet" href="/static/lightbox2/css/lightbox.css" />
            <script src="/static/lightbox2/js/lightbox-plus-jquery.min.js"></script>
            <div class="det-intro-cont det-comm-pic">
            {loop $comment['thumbImg'] $imgKey $img}
                {if $img}<a href="{eval echo $comment['image'][$imgKey]}" data-lightbox="img_set"><img src="{$img}" alt=""/></a>{/if}
            {/loop}                
            </div>
            {/if}
            <p class="det-comm-pf">
                {if $comment['score']}综合得分：<span class="r_star j_star_one" data-score={$comment['score']}><em></em></span>{/if}
                <a class="det-c-down nouse"  data-id="{$comment['commentId']}">
                    <i class="ic-down" ></i>没用 <em>{$comment['usefull']}</em>
                </a>
                <a class="det-c-up usefull"  data-id="{$comment['commentId']}">
                    <i class="ic-up"></i>有用 <em>{$comment['nouse']}</em>
                </a>
            </p>
            <p class="det-comm-info">{$comment['content']}</p>
        </div>
       
        <a class="r-viewmore" href="/show/moreComments?gearId={$gear['gearId']}" id='allcomment'>查看所有评论</a>
        {/if}
    </section>
    <!--recommend shoes-->
    {if $similarGear[0]}
    <section class="det-recommend">
        <img src="/static/images/r_tit.png" alt=""/>
        <ul class="dt-relist">
        {loop $similarGear $k $v}
        <li><!--/show/gear?gearId=-->
            <a href="joggers://gearShoe/{$v['gearId']}">
                <img src="{$v['image']}" alt=""/>
                <h4>{$v['name']}</h4>
                <p>{eval echo $v['currency']?'$':'￥'}{$v['price']}</p>
            </a>
         </li>      
        {/loop}
          
        </ul>
    </section>
    {/if}
</section>

<!--评论框-->
<div class="fx-comm-btn">
    <a href="joggers://gearComment/{$gearId}"><img src="/static/images/btn-comment.png" alt=""/></a>
    <a href="joggers://gearRating/{$gearId}"><img src="/static/images/btn-star.png" alt=""/></a>
</div>


<script src="/static/js/TouchSlide.1.1.js"></script>
<script src="/static/js/zepto.min.js"></script>
<script src="/static/js/touch.js"></script>
<script src="/static/js/run_main.js"></script>
<script src="/static/toastr/toastr.min.js"></script>
<script>
var msg = {};

//配色
$('#blendent img').on('click',function(){
  //alert()
  $('#blendent img').removeClass('cur');
  $(this).attr('class','cur');
  $('#first-img').attr('src',this.src)

});

//星星
var j_star_one = $('.j_star_one')
j_star_one.each(function(){
    score_one = $(this).attr('data-score');
    $(this).find('em').css('width',85*(score_one/5)+'px');
});

//装备，想要
$('#iwant').on('click',function(){
    if(msg['iwant']) {
        toastr['info'](msg['iwant']);
        return true;
    }

    gid=$(this).attr('data-id');
    returncontent1=$(this).find('em');
    $.ajax({
        data:{gid:gid},
        url:'/show/likes',
        type:'post',
        success:function(res){
            if(res > 0){
                returncontent1.html(res);
            } else if(res == -1) {
                location.href="joggers://login/";
            } else if(res == -2) {
                msg['iwant'] = '亲，您已经 "想要" 过了';
                toastr['info'](msg['iwant']);
            }
        }
    })
});

//装备，拥有
$('#possess').on('click',function(){
    if(msg['possess']) {
        toastr['info'](msg['possess']);
        return true;
    }

    gid=$(this).attr('data-id');
    $.ajax({
        data:{gid:gid},
        url:'/show/possess',
        type:'post',
        success:function(res){
            if(res == 1){
                location.href="joggers://gearRating/"+gid;
            } else if(res == -1) {
                location.href="joggers://login/";
            } else if(res == -2) {
                msg['possess'] = '亲，您已经评过分了';
                toastr['info'](msg['possess']);
            }
        }
    })    
});

// 加入对比
$('#join_compare').one('click', function(){
    before_join_compare();
    after_join_compare();
});

$(function(){
    before_join_compare('detect');
});

function join_compare(cids, gid) {
    cids = cids ? gid + ',' + cids : gid;
    setCookie('joggers_gear_cids', cids, '100d');
}

function before_join_compare(type) {
    var cids = getCookie('joggers_gear_cids');
    var gid = $('#join_compare').attr('data-id');
    var tcids = ',' + cids + ',';

    if(tcids.indexOf(',' + gid + ',') == -1) {
        if(type != 'detect') {
            join_compare(cids, gid);
        }
    } else if(type == 'detect') {
        after_join_compare();
    }
}

function after_join_compare() {
    $('#join_compare').text('已加入对比').attr({'style': 'width:80px;color:#999;margin-right:10px;border-color:#999;text-decoration:none;'});
}

var hasclickId=[];

$('.usefull').one('click',function(){
    cid=$(this).attr('data-id')
    if(hasclickId.indexOf(cid)>-1){        
       return false 
    }else{
          hasclickId.push(cid);
          console.log(hasclickId);          
          returncontent=$(this).find('em');          
          $.ajax({
            data:{
                cid:cid,
            },
            url:'/show/usefull',
            type:'post',           
            success:function(res){
                   returncontent.html(res)
            }
          }) 
    }    
    return false;
})
$('.nouse').one('click',function(){
    cid=$(this).attr('data-id')
    if(hasclickId.indexOf(cid)>-1){        
       return false 
    }else{
          hasclickId.push(cid);
          console.log(hasclickId);        
          returncontent=$(this).find('em')
          $.ajax({
            data:{
                cid:cid,
            },
            url:'/show/nouse', 
            type:'post',         
            success:function(res){
                   returncontent.html(res)
            }
          }) 
    }    
    return false;
})
</script>

</body>
{template 'show/web-footer'}